import React, { FC } from 'react'
import { Table } from 'antd';

const data = [
  {
    key: "1",
    month: "2024-01",
    value1: 5282460.0,
    value2: 4014011.83,
    value3: 1234567.89,
    value4: 9876543.21,
    value5: 1111111.11,
    value6: 2222222.22,
    value7: 3333333.33,
    value8: 4444444.44,
    value9: 5555555.55,
    value10: 6666666.66
  },
  {
    key: "2",
    month: "2024-02",
    value1: 5292460.0,
    value2: 4024011.83,
    value3: 1234567.89,
    value4: 9876543.21,
    value5: 1111111.11,
    value6: 2222222.22,
    value7: 3333333.33,
    value8: 4444444.44,
    value9: 5555555.55,
    value10: 6666666.66
  },
  {
    key: "3",
    month: "2024-03",
    value1: 5302460.0,
    value2: 4034011.83,
    value3: 1234567.89,
    value4: 9876543.21,
    value5: 1111111.11,
    value6: 2222222.22,
    value7: 3333333.33,
    value8: 4444444.44,
    value9: 5555555.55,
    value10: 6666666.66
  },
  {
    key: "4",
    month: "2024-04",
    value1: 5312460.0,
    value2: 4044011.83,
    value3: 1234567.89,
    value4: 9876543.21,
    value5: 1111111.11,
    value6: 2222222.22,
    value7: 3333333.33,
    value8: 4444444.44,
    value9: 5555555.55,
    value10: 6666666.66
  },
  {
    key: "5",
    month: "2024-05",
    value1: 5322460.0,
    value2: 4054011.83,
    value3: 1234567.89,
    value4: 9876543.21,
    value5: 1111111.11,
    value6: 2222222.22,
    value7: 3333333.33,
    value8: 4444444.44,
    value9: 5555555.55,
    value10: 6666666.66
  },
  {
    key: "6",
    month: "2024-06",
    value1: 5332460.0,
    value2: 4064011.83,
    value3: 1234567.89,
    value4: 9876543.21,
    value5: 1111111.11,
    value6: 2222222.22,
    value7: 3333333.33,
    value8: 4444444.44,
    value9: 5555555.55,
    value10: 6666666.66
  },
  {
    key: "7",
    month: "2024-07",
    value1: 5342460.0,
    value2: 4074011.83,
    value3: 1234567.89,
    value4: 9876543.21,
    value5: 1111111.11,
    value6: 2222222.22,
    value7: 3333333.33,
    value8: 4444444.44,
    value9: 5555555.55,
    value10: 6666666.66
  },
  {
    key: "8",
    month: "2024-08",
    value1: 5352460.0,
    value2: 4084011.83,
    value3: 1234567.89,
    value4: 9876543.21,
    value5: 1111111.11,
    value6: 2222222.22,
    value7: 3333333.33,
    value8: 4444444.44,
    value9: 5555555.55,
    value10: 6666666.66
  },
  {
    key: "9",
    month: "2024-09",
    value1: 5362460.0,
    value2: 4094011.83,
    value3: 1234567.89,
    value4: 9876543.21,
    value5: 1111111.11,
    value6: 2222222.22,
    value7: 3333333.33,
    value8: 4444444.44,
    value9: 5555555.55,
    value10: 6666666.66
  },
  {
    key: "10",
    month: "2024-10",
    value1: 5372460.0,
    value2: 4104011.83,
    value3: 1234567.89,
    value4: 9876543.21,
    value5: 1111111.11,
    value6: 2222222.22,
    value7: 3333333.33,
    value8: 4444444.44,
    value9: 5555555.55,
    value10: 6666666.66
  },
  {
    key: "10",
    month: "2024-11",
    value1: 5372460.0,
    value2: 4104011.83,
    value3: 1234567.89,
    value4: 9876543.21,
    value5: 1111111.11,
    value6: 2222222.22,
    value7: 3333333.33,
    value8: 4444444.44,
    value9: 5555555.55,
    value10: 6666666.66
  },
  {
    key: "10",
    month: "2024-12",
    value1: 5372460.0,
    value2: 4104011.83,
    value3: 1234567.89,
    value4: 9876543.21,
    value5: 1111111.11,
    value6: 2222222.22,
    value7: 3333333.33,
    value8: 4444444.44,
    value9: 5555555.55,
    value10: 6666666.66
  },
  {
    key: "10",
    month: "2025-01",
    value1: 5372460.0,
    value2: 4104011.83,
    value3: 1234567.89,
    value4: 9876543.21,
    value5: 1111111.11,
    value6: 2222222.22,
    value7: 3333333.33,
    value8: 4444444.44,
    value9: 5555555.55,
    value10: 6666666.66
  }

];
const target = '2025-01'

const TablesWrap: FC = () => {
  const columns: {}[] = [
    {
      title: '月份',
      dataIndex: 'month',
      key: 'month'
    },
    {
      title: 'Value 0',
      dataIndex: 'value1',
      key: 'value1'
    },
    {
      title: 'Value 1',
      dataIndex: 'value1',
      key: 'value1',
      onCell: (record) => {
        console.log(record.month, 'month');
        const month = new Date(target) // 9
        const nextMonth = new Date(record.month)
        nextMonth.setMonth(nextMonth.getMonth())
        console.log(nextMonth.getMonth(), 'nextMonth');

        if (month >= nextMonth && month <= new Date(record.month)) {
          return {
            style: {
              background: 'yellow'
            }
          }
        }
      }
    },
    {
      title: 'Value 2', dataIndex: 'value2', key: 'value2',
      onCell: (record) => {
        const month = new Date(target) // 9
        const nextMonth = new Date(record.month)
        nextMonth.setMonth(nextMonth.getMonth() + 1)
        if (month <= nextMonth && month >= new Date(record.month)) {
          return {
            style: {
              background: 'yellow'
            }
          }
        }
      }
    },
    {
      title: 'Value 3',
      dataIndex: 'value3',
      key: 'value3',
      onCell: (record) => {
        const month = new Date(target) // 9
        const nextMonth = new Date(record.month)
        nextMonth.setMonth(nextMonth.getMonth() + 2)
        if (month <= nextMonth && month >= new Date(record.month)) {
          return {
            style: {
              background: 'yellow'
            }
          }
        }
      }
    },
    {
      title: 'Value 4',
      dataIndex: 'value4',
      key: 'value4',
      onCell: (record) => {
        const month = new Date(target) // 9
        const nextMonth = new Date(record.month)
        nextMonth.setMonth(nextMonth.getMonth() + 3)
        if (month <= nextMonth && month >= new Date(record.month)) {
          return {
            style: {
              background: 'yellow'
            }
          }
        }
      }
    },
    {
      title: 'Value 5',
      dataIndex: 'value5',
      key: 'value5',
      onCell: (record) => {
        const month = new Date(target) // 9
        const nextMonth = new Date(record.month)
        nextMonth.setMonth(nextMonth.getMonth() + 4)
        if (month <= nextMonth && month >= new Date(record.month)) {
          return {
            style: {
              background: 'yellow'
            }
          }
        }
      }

    },
    {
      title: 'Value 6',
      dataIndex: 'value6',
      key: 'value6',
      onCell: (record) => {
        const month = new Date(target);
        const nextMonth = new Date(record.month);
        nextMonth.setMonth(nextMonth.getMonth() + 5)
        if (month <= nextMonth && month >= new Date(record.month)) {
          return {
            style: {
              background: 'yellow'
            }
          }
        }
      }

    },
    {
      title: 'Value 7',
      dataIndex: 'value7',
      key: 'value7',
      onCell: (record) => {
        const month = new Date(target);
        const nextMonth = new Date(record.month)
        nextMonth.setMonth(nextMonth.getMonth() + 6)
        if (month <= nextMonth && month >= new Date(record.month)) {
          return {
            style: {
              background: 'yellow'
            }
          }
        }
      }

    },
    {
      title: 'Value 8',
      dataIndex: 'value8',
      key: 'value8',
      onCell: (record) => {
        const month = new Date(target);
        const nextMonth = new Date(record.month)
        nextMonth.setMonth(nextMonth.getMonth() + 7)
        if (month <= nextMonth && month >= new Date(record.month)) {
          return {
            style: {
              background: 'yellow'
            }
          }
        }
      }

    },
    {
      title: 'Value 9',
      dataIndex: 'value9',
      key: 'value9',
      onCell: (record) => {
        const month = new Date(target);
        const nextMonth = new Date(record.month);
        nextMonth.setMonth(nextMonth.getMonth() + 8)
        if (month <= nextMonth && month >= new Date(record.month)) {
          return {
            style: {
              background: 'yellow'
            }
          }
        }
      }
    },
    {
      title: 'Value 10',
      dataIndex: 'value10',
      key: 'value10',
      onCell: (record) => {
        const month = new Date(target);
        const nextMonth = new Date(record.month)
        nextMonth.setMonth(nextMonth.getMonth() + 9)
        if (month <= nextMonth && month >= new Date(record.month)) {
          return {
            style: {
              background: 'yellow'
            }
          }
        }
      }

    },
  ];
  return (
    <Table
      columns={columns}
      dataSource={data}
      pagination={false}
      bordered
    />
  )
}


export default TablesWrap;

